<template>
  <view class="tp-drection-card">
    <view class="cost-box">
      <ai-icon :type="iconType" color="var(--gray-2)"></ai-icon>
      <text class="cost-text">{{distance}}</text>
      <text class="cost-text">{{byText}}</text>
      <text class="cost-text">{{consume}}</text>
    </view>
    <view class="oper-box" @click="onViewDrection">
      <text class="oper-text">路线查看</text>
      <ai-icon type="icon-right" color="var(--brand-2)" :size="14"></ai-icon>
    </view>
  </view>
</template>

<script>
  export default {
    name:"tp-drection-card",
    props: {
      consume: String,
      by: String,
      distance: String,
      from: {
        type: Object,
        default: {
          latitude: 0,
          longitude: 0
        }
      },
      to: {
        type: Object,
        default: {
          latitude: 0,
          longitude: 0,
        }
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
      iconType() {
        return this.by == 'walking' ? 'icon-walk' : 'icon-car'
      },
      byText() {
        return this.by == 'walking' ? '步行' : '驾车'
      }
    },
    methods: {
      onViewDrection() {
        let by = this.by
        let fromLat = this.from.latitude
        let fromLong = this.from.longitude
        let toLat = this.to.latitude
        let toLong = this.to.longitude
        let url = `/pages/plan/drection?by=${by}&fromLat=${fromLat}&fromLong=${fromLong}&toLat=${toLat}&toLong=${toLong}`
        uni.navigateTo({
          url:url
        })
        
      }
    }
  }
</script>

<style lang="scss">
@import "@/styles/_var.scss";

.tp-drection-card {
  overflow: hidden;
  background: var(--brand-3);
  border-radius: $card-border-radius;
  box-shadow: var(--shadow-1);
  padding: $card-padding;
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--gray-2);
  
  .cost-box, .oper-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .cost-text {
    padding-left: $gutter * 0.5;
  }
  .oper-text {
    padding-right: $gutter * 0.5;
    font-size: $font-size-md;
    color: var(--brand-2);
  }
}

</style>